<template>
  <div class="edit">
    <div class="hea">
           <div> 
            <div class="three"></div>
            <span class="ding">编辑订单</span>
            </div>
            <div>
                <el-button class="bt" icon="el-icon-arrow-left" @click="goback">返回</el-button>
            </div>
 
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>真订单状态</span>
        <el-button style="float: right; padding: 3px 0" type="text">修改订单状态</el-button>
      </div>
     <span class="zhi"> {{ '待支付 '  }}</span>
     </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>真购买信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">修改订单状态</el-button>
      </div>
     <span class="zh"> {{ '购买人名称: 山东xxx有限责任公司'  }}</span><br><br>
     <span class="zh"> {{ '是否实名认证: 是'  }}</span><br><br>
     <span class="zh"> {{ '实名认证主体性质: 企业'  }}</span><br><br>
     <span class="zh"> {{ '实名认证主体名称: 山东xxx有限责任公司'  }}</span><br><br>

     </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>真购买信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">修改订单状态</el-button>
      </div>
     <span class="zh"> {{ '商品名称: 金银花 统 山东'  }}</span><br><br>
     <span class="zh"> {{ '数量: 200 公斤'  }}</span><br><br>
     <span class="zh"> {{ '商品单价: 190.00 元'  }}</span><br><br>
     <span class="zh"> {{ '包装方式: 编织袋'  }}</span><br><br>
     <span class="zh"> {{ '起购量: 100 公斤'  }}</span><br><br>
     <span class="zh"> {{ '产地:山东'  }}</span><br><br>
     <span class="zh"> {{ '能否提供发票: 能'  }}</span><br><br>
     <span class="zh"> {{ '运费: 0'  }}</span><br><br>
     <span class="zh"> {{ '起购量: 100 公斤'  }}</span><br><br>
     <span class="zh"> {{ '订单总金额:49999.00'  }}</span><br><br>
     <span class="zh"> {{ '交易金额: 45000.00'  }}</span><br><br>
     <span class="zh"> {{ '实付金额: 40000.00'  }}</span><br><br>
     </el-card>
     <!-- 收货信息 -->
     <el-card class="box-card">
       <div slot="header" class="clearfix">
        <span>收货信息</span>  </div>
      <div class="receipt">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item label="收货人" prop="user">
              <el-input v-model="ruleForm.user"></el-input>
              <el-button style="position: absolute">更换收货地址</el-button>
            </el-form-item>
            <el-form-item label="收货手机号码" prop="mobile">
              <el-input v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="收货地址">
              <v-distpicker></v-distpicker>
            </el-form-item>
            <el-form-item>
              <input
                type="text"
                placeholder="请输入收货详情地址"
                style="height: 50px; width: 440px"
              />
            </el-form-item>
          </el-form>
        
</div>
     </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>物流信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">添加物流信息</el-button>
      </div>
     <span> {{ '2023-03-14 14:22:36  xxx 第一批已发送-物流单据号xxxxxxxxx 运货车牌号码xxxx  '  }}</span><br><br>
     <span > {{ '2023-03-14 14:22:36  xxx 第一批货物已送达 '  }}</span><br><br>
     <span > {{ '2023-03-14 14:22:36  xxx 第二批货物已发送物流单据号xxxxxxx运货车牌号码xxxx'  }}</span><br><br>

     </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单附件</span>
        <el-table border :data="uploadList" style="width: 100%">
          <el-table-column prop="name" label="支付凭证" width="180">
            <el-upload class="upload-demo" ref="upload" action=''>
              <a href="javascript:;">第一次上传凭证</a><br>

              <a href="javascript:;">第二次上传凭证</a> <br>
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
          <el-table-column prop="name" label="发货凭证" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">第一次上传凭证</a><br>
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
          <el-table-column prop="name" label="合同" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload></el-table-column
          >
          <el-table-column prop="name" label="发票" width="180">
            <el-upload class="upload-demo" ref="upload">
              <a href="javascript:;">上传</a>
            </el-upload>
          </el-table-column>
        </el-table>

      </div>
  

     </el-card>
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>备注信息</span>
        <el-button style="float: right; padding: 3px 0" type="text">添加物流信息</el-button>
      </div>
     <span> {{ '2023-03-14 14:22:36  xxx 第一批已发送-物流单据号xxxxxxxxx 运货车牌号码xxxx  '  }}</span><br><br>
     <span > {{ '2023-03-14 14:22:36  xxx 第一批货物已送达 '  }}</span><br><br>
     <span > {{ '2023-03-14 14:22:36  xxx 第二批货物已发送物流单据号xxxxxxx运货车牌号码xxxx'  }}</span><br><br>
     <el-button type="primary" style="margin-left: 45%" @click="edit"
          >确认修改</el-button
        >
     </el-card>
  </div>
</template>

<script>
export default {
    name:'edit',
  data () {
    return {
      ruleForm: {
        user: "",
        mobile: "",
      },
      rules: {
        user: [{ required: true, message: "", trigger: "blur" }],
        mobile: [{ required: true, message: "", trigger: "blur" }],
      },
      uploadList: [
        {
          name: "111111111",
        },
      ],
    };
  },

  components: {},

  computed: {},


  methods: {
    goback(){
        this.$router.go(-1)
    },
    edit(){
      this.$router.push("/submit");

    }
  }
}

</script>
<style lang='scss' scoped>
.edit{
    width: 100%;
    background: rgba(243, 243, 243);
}
.three{
    width: 20px;
    height: 20px;
    background: green;
    position: fixed;
    top: 4px;
    left: 19%;
}
.hea{
   width: 900px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.box-card{
    width: 900px;
    margin: auto;
    // background: #ccc;
}
.zhi{
    color: red;
}
.edit ::v-deep .el-card__header{
    background-color: #ccc;
}
.zh{
   margin-left: 315px;
}
.receipt {
  width: 600px;
  height: 400px;
  margin: auto;
  margin-top: 40px;
}
</style>